<template>
  <!-- 最外层容器提供轮播窗口 -->
  <div id="demo" class="carousel" :style="{width:innerWidth+'px'}" @mouseenter="stop" @mouseleave="start">
    <!-- 1. 轮播图片 -->
    <!-- 轮播图片总容器,将所有图片进行横向包装 -->
    <div class="carousel-inner" :class="ulClass" :style="ulStyle">
      <!-- 轮播图片主体内容 -->
      <div v-for="(img,i) of imgs" :key="i" class="carousel-item"   :style="{width:innerWidth+'px'}">
        <router-link :to="'/picture'" :title="img.title" >
          <img :src="img.src" :style="{width:innerWidth+'px'}" >
        </router-link>
        <!-- <router-link :to="'/picture'" v-text="img.title"></router-link> -->
      </div>
      <!-- 轮播图片标题 -->
      <!-- <div class="carousel-item" :style="{width:innerWidth+'px'}">
        <router-link :to="'/picture'" :title="imgs[0].title">
          <img :src="imgs[0].src" :style="{width:innerWidth+'px'}">
        </router-link> 
        <router-link :to="'/picture'" v-text="imgs[0].title"></router-link>
      </div> -->
    </div>
    <!-- 2. 左右点击箭头 -->
    <!--  2.1 左侧箭头 -->
    <a href="javascript:;" class="carousel-control-nexts" @click="move(1)">
      <span class="carousel-control-nexts-icon"></span>
    </a>
    <!--  2.2 右侧箭头 -->
    <a href="javascript:;" class="carousel-control-prevs" @click="move(-1)">
      <span class="carousel-control-prevs-icon"></span>
    </a>
    <!-- 3. 轮播指示符 -->
    <ul class="carousel-indicators" :style="{marginLeft:(-imgs.length)*15+'px'}">
      <li  v-for="(img,idx) of imgs" :key="idx" :class="idx==i?'active':''"  @click="moveTo(idx)"></li>
    </ul>
  </div>
</template>
<style scoped>
/* ------------------------------------------------------------------------------------- */
  #demo.carousel{
    margin-top:60px;
    overflow:hidden;
    position:relative;
  }
  #demo  .carousel::after{
    content:"";
    display:block;
    clear:both;
  }
   #demo.carousel>.carousel-inner.hasTrans{
     transition:all .2s linear;
   }
  #demo.carousel>.carousel-inner>.carousel-item{
    display:block;
    float:left;
  }
  #demo.carousel>.carousel-inner>.carousel-item>a:last-child{
    display:block;
    /* height:50px; */
    color:#fff;
    text-align:center;
    font-size:15px;
    line-height:50px;
    text-decoration:none;
    background-color:#f2f2f2;
    opacity: 1;
  }
#demo .carousel-item img{
  height:500px;
}
  /*重写指示符的样式*/
  #demo .carousel-indicators{
    display: flex;
    position: absolute;
    left: 50%;
    bottom:15%;

  }
  #demo .carousel-inner:after {
    content:'';
    display:block;
    clear:both;
  }
  #demo .carousel-indicators li{
    width:15px;height:15px;
    background-color:#fff;
    margin-left:6px;
    margin-right:6px;
    border-radius: 50%;
    top:60px;
  }
  #demo .carousel-indicators>li:hover, .carousel-indicators>li.active{
    transform:scale(1.3)
  }
  /*重写左右箭头的样式*/
  #demo .carousel-control-prevs,
  #demo .carousel-control-nexts{
    width:40px;height:100px;
    background-color:rgba(94, 94, 93, 0.3);
    margin-left:40px;
    border-radius:0.25rem;
    display: block;
    position: absolute;
    top:35%;
  }
  #demo .carousel-control-nexts{
    /* margin-right:40px; */
    right:40px;
  }
#demo .carousel-control-prevs .carousel-control-prevs-icon,
#demo .carousel-control-nexts .carousel-control-nexts-icon{
  display:block;
  width:100%;
  height:100%;
  background:url('/img/sukai/carousel/left_ar.png') 3px 25px no-repeat rgba(109, 109, 106, 0.3);
  background-size:30px 50px;
}
#demo .carousel-control-nexts .carousel-control-nexts-icon{
  /* background-size:30px 50px; */
  background:url('/img/sukai/carousel/right_ar.png') 3px 25px no-repeat rgba(109, 109, 106, 0.3);
}


</style>
<script>
export default {
  data(){
    return {
      // innerWidth:window.innerWidth*0.8,
      innerWidth:1200,
      ulClass:{hasTrans:true},
      i:0,             //当前正在播放的图片绑定的变量
      imgs:[
        {
          src:"img/sukai/carousel/carousel_hunliji_01.jpg",
          title:"13",
          to:"javascript:;"
        },
        {
          src:"img/sukai/carousel/carousel_hunliji_02.jpg",
          title:"13",
          to:"javascript:;"
        },
        {
          src:"img/sukai/carousel/carousel_hunliji_03.jpg",
          title:"13",
          to:"javascript:;"
        },
        {
          src:"img/sukai/carousel/carousel_hunliji_04.jpg",
          title:"13",
          to:"javascript:;"
        },
        {
          src:"img/sukai/carousel/carousel_hunliji_05.jpg",
          title:"13",
          to:"javascript:;"
        },
        {
          src:"img/sukai/carousel/carousel_hunliji_06.jpg",
          title:"13",
          to:"javascript:;"
        },
        {
          src:"img/sukai/carousel/carousel_hunliji_07.jpg",
          title:"13",
          to:"javascript:;"
        },
        {
          src:"img/sukai/carousel/carousel_hunliji_08.jpg",
          title:"13",
          to:"javascript:;"
        }
      ],
      canClick:true,  
      timer:null
    }
  },
  created(){
    //在创建阶段对window的resize事件进行监听,获取屏幕的宽度
    window.addEventListener("resize",()=>{
      var innerwidth =  window.innerWidth;
      this.innerWidth=innerwidth<=1200 ? innerwidth+'px':'1200px';
    })
    this.start();
  },
  methods:{
    // 0. 关闭定时器函数
    stop(){
      clearInterval(this.timer);
    },
    // 1. 开启定时器函数
    start(){
      // 设置周期性定时器,每隔1秒调用一次函数实现轮播图的自动播放功能
      this.timer=setInterval(()=>{
        this.move(1)
      },3000)
    },
    // 2. 左右两侧点击切换函数
    move(i){
      // 开关为true时允许执行函数体
      if(this.canClick){
        //关闭开关
        this.canClick=false;
        // 0. 执行函数体(根据参数值进行选择执行)
        // 1. (此处控制当前为切换时图片为最走测图片的状态执行的函数体)(判断是否为向右点击事件,并且当前是否为第一张图片)当i==-1代表触发向右点击事件,==0代表当前照片为第一张照片
        if(i==-1&&this.i==0){
          //此时不执行动画切换效果
          this.ulClass.hasTrans=false;
          // 启动一次型定时器
          setTimeout(()=>{
            // 稍后让变量i切换为图片长度值(即切换图片为首张图片即初始化)
            this.i=this.imgs.length;
            //启动一次性定时器稍后执行
            setTimeout(()=>{
              // 开启动画的执行(瞬间切换图片值罪右侧)
              this.ulClass.hasTrans=true;
              // this.i代表变量data中的i(表示第几张图片)与i表示函数传进来的参数i指向1,-1或者其他中间参数
              // 切换完成后执行自增事件(即开始执行用户眼中看到的切换效果)
              this.i+=i;
              // 切换完之后执行定时器,将开关打开.接收下一次函数体的触发
              setTimeout(()=>{
                // 打开开关接收下一次按钮点击事件的触发
                this.canClick=true;
              },200)
            },50)
          },50)
        // 2. (此处控制当前未切换图片时图片为右侧倒数第二张时执行的函数体)当向左点击并且未执行切换时当前变量的值为图片张数-1(代表此时为除去尾部最后一张多加的图片后为最后一张时,执行的事件)
        }else if(i==1&& this.i==this.imgs.length-1){
          // 先让图片进行切换最后一张重复的照片
          this.i+=i;
          // 然后开启一次性定时器
          setTimeout(()=>{
            // 将动画切换效果关掉
            this.ulClass.hasTrans=false;
            setTimeout(()=>{
              // 之后将图片迅速切换至最左侧的图片
              this.i=0;
              // 之后再开启一次性定时器
              setTimeout(()=>{
                // 打开正常切换动画的效果
                this.ulClass.hasTrans=true;
                setTimeout(()=>{
                  // 将开关打开继续接受外部事件的点击执行
                  this.canClick=true;
                })
              },50)
            },50)
          },200)
         // 3. 当图片不为第一张和倒数第二张时正常执行的函数体
        }else{
          this.i+=i;
          setTimeout(()=>{
            this.canClick=true
          },300)
        }
      }
    },
    // 3. 轮播指示器绑定函数,将变量i更改到跳转位置,改变左边距实现切换图片
    moveTo(i){
      //判断点击时点击事件开关是否打开,若打开则执行函数体(节流函数)
      if(this.canClick){
        this.i=i;
        this.canClick=false;
        //设置一次性定时器,实现节流(短暂关闭函数执行路径),短时间内响应一次点击事件
        setTimeout(()=>{
          //打开函数执行路径,接收点击事件对函数体的执行
          this.canClick=true;
        },300)
      }
    }
  },
  computed:{
    // 通过计算属性计算轮播图容器总宽度与左侧切换边距
    ulStyle(){
      // 计算获取容器总宽度
      var width=this.innerWidth*(this.imgs.length+1)+'px';
      //计算轮播图左侧边距大小
      var marginLeft=-this.i*this.innerWidth+"px";
      return {width,marginLeft}
    }
  }
}
</script>